<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>简历</title>
  </head>
  <body>
    <div id="c"></div>
    <script>
      let u1 = {
        //user的结构
        username: '保定梁朝伟', // 用户名
        userId: 19318, // 用户id
        theme: 'light', // 主题名
        favorite: '看书', // 爱好
        birthday: '1993-12-28', // 生日
        age: 28, // 年龄
        avatar:
          'https://tva1.sinaimg.cn/large/008i3skNgy1gq9wsodlenj30gc0ji14m.jpg', // 头像
        hometown: '河北省保定市', // 家乡
        // 工作经验
        jobs: [
          {
            company: '北京格致璞科技有限公司',
            from: '2018-09',
            to: '2019-06',
          },
          {
            company: '北京豆网科技有限公司',
            from: '2019-06',
            to: '2019-12',
          },
          {
            company: '值得买科技',
            from: '2019-12',
          },
        ],
        // 技能
        skills: [
          ['css3', '精通'],
          ['javascript', '熟练'],
          ['html', '精通'],
        ],
        // 自我介绍, 要求：
        //    < 要替换成 &lt;
        //    > 要替换成 &gt;
        // XSS
        //    \n要替换成<br/>
        // String.replace(/\n/g, '<br />')

        description: `• 性格<u>严谨</u>，一丝不苟。注重细节。具有大局观和一定的领导组织能力。
         • 对于前沿科技具有浓厚的兴趣，具有一定的创新能力。
         • 勤奋、努力，有志于长期从事相关工作`,
      }



      function encodeHTML(html) {
        let d = document.createElement('div')
        d.innerText = html
        return d.innerHTML
      }

      function getUserHTML(user) {
        return `<table border="1">
      <tr>
        <td>姓名</td>
        <td>${user.username}</td>
      </tr>
      <tr>
        <td>照片</td>
        <td><img width="160" src="${user.avatar}" ></td>
      </tr>
      <tr>
        <td>爱好</td>
        <td>${user.favorite}</td>
      </tr>
      <tr>
        <td>技能</td>
        <td><ul>
        ${
          user.skills.map(function(item) {
            return `<li>${item[0]}: ${item[1]}</li>`
          }).join('')
        }
        </ul></td>
      </tr>

      <tr>
        <td>工作经验</td>
        <td><ul>
          ${user.jobs.map(function(job) {
            return `<li>
              ${job.company}:
              ${job.to ? `${job.from}-${job.to}`
                       : `${job.from}至今`}
            </li>`
          }).join('')}
        </ul></td>
      </tr>
      <tr>
        <td>自我介绍</td>
        <td>${
          encodeHTML(user.description)
            .replace(/\n/g, '<br/>')
          }</td>
      </tr>
    </table>`
      }

      function render() {
        let html = getUserHTML(u1)
        document.getElementById('c').innerHTML = html
      }
      render()
    </script>


  </body>
</html>
